<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../autosuggest.css">
    <script src="../autosuggest.js"></script>

</head>
<body style="padding-top: 30px;">
<div class="form-group col-md-4 col-xs-10 col-md-offset-1 col-xs-offset-1">
    <input type="text" class="form-control" id="t1" placeholder="最短提示长度为1, 最多联想3个,请输入中国地名,例如'北京'"/>
</div>

<div class="form-group col-md-4 col-xs-10 col-md-offset-1 col-xs-offset-1">
    <input type="text" class="form-control" id="t2" placeholder="默认操作"/>
</div>

</div>

<script>
    $(document).ready(function () {
        $("#t1").autosuggest({
            url: 'city.json',
            minLength: 1,
            maxNum: 3,
            align: 'center',
            method: 'post',
            highlight: true,
            immediate: true,
            queryParamName: 'city',
            nextStep: function (ele) {
//                alert("hello world!");
                alert(ele.data('value'));
            },
            split: ' ',
            open: function () {
                console.log("start open");
            },
            close: function () {
                console.log("start close");
            }
        });

        $("#t2").autosuggest({
            url: 'city.json',
            method: 'post',
            queryParamName: 'city',
            firstSelected: true
        });
    });
</script>


</body>
</html>



